<template>
	<view>

		<headerBar>
			<view class="flex lt" style="min-height: 100%;">
				<view class="w30 white" v-if="role != 3" style="flex:none;">
					<view class="square rds wp1 flex ct" @tap="$refs.searchs.toggle(true);">
						<view class="rds100 whiteBg op2 bd"></view>
						<view class="flex ct father z2 rds100">
							<text class="sIcon-filter fz13"></text>
						</view>
					</view>
				</view>
				<view class="w45 white pl" v-if="role < 3" style="flex:none;">
					<navigator url="/pages/addCompany/addCompany" class="square rds wp1 flex ct" hover-class="op9">
						<view class="rds100 whiteBg op2 bd"></view>
						<view class="flex ct father z2 rds100">
							<text class="sIcon-addCircle"></text>
						</view>
					</navigator>
				</view>
				<view class="text-center white" style="flex:auto;">
					
				</view>
			</view>
			
		</headerBar>

		<block v-if="loading">
			<empty :loading="true"></empty>
		</block>
		<block v-else>


			<view>

				<!-- 企业显示点位列表 -->
				<block v-if="role == 3">
					<view class="whiteBg bb">
						<switchTabber :list="statusList" itemKey="title" @change="switchStatus" :index="current"></switchTabber>
					</view>
					<view class="whiteBg">
						<station :list="page.list" :role="role" @delete="page.list.splice($event.index,1)"></station>
					</view>
				</block>

				<!-- 运维公司：1 运维人员公司：2 监管：4 -->
				<block v-else>

					<searchs @submit="onSearch" ref="searchs"></searchs>

					<!-- <view class="pd10 plr15 whiteBg mb10">
						<input :adjust-position="false" @blur="confirm" type="text" v-model="companyName" class="block" placeholder="输入企业名称搜索">
					</view> -->
					<company ref="companyList" :list="page.list" @remove="removeCompany"></company>
					
					
					
				</block>


				<empty class="animated fadeIn" :loading="loading" :list="page.list"></empty>

			</view>


		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					list: [],
					lastPage: false,
					pageNumber: 1,
					pageSize: 10
				},
				current: 0,
				statusList: ["全部"],
				loading: true,
				refresh: false,
				isLogin: false,
				role: 3 ,
				companyName: "",
				conditions: {}
			}
		},

		computed: {
			status: function(e) {
				if (this.statusList.length == 0) {
					return "";
				}
				return this.statusList[this.current].value;
			},
			searchStation(){
				let keys = ["ts.area","ts.monitorNum","ts.type","ts.controlLevel"] ;
				return keys.some(c=> !!this.conditions[c]);
			}
		},

		onShow() {
			this.checkLogin();
		},

		onReachBottom() {
			if (this.page.lastPage) {
				return;
			}
			this.page.pageNumber++;
			this.loadDataByRole();
		},

		onPullDownRefresh() {
			if (this.refresh) {
				return;
			}
			this.refresh = true;
			this.page.pageNumber = 1;
			this.loadDataByRole();
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		methods: {

			checkLogin: function(e) {
				if (this.isLogin) {
					this.page.pageNumber = 1;
					this.loadDataByRole();
					return;
				}
				var data = {};
				this.loading = true;
				this.kit.get("/api/wxuser/checkLogin", data, res => {
					this.isLogin = res.isLogin;
					if (!this.isLogin) {
						uni.navigateTo({
							url: "/pages/login/login"
						});
						return;
					}
					this.loading = false;
					this.role = uni.getStorageSync("role");
					this.page.pageNumber = 1;
					this.loadDataByRole();
				});
			},

			loadDataByRole: function(e) {
				uni.showLoading({
					title:"加载中"
				})
				
				this.$refs.companyList && this.$refs.companyList.init() ;
				
				if (this.role == 1 || this.role == 2) { //运维公司
					if (this.searchStation) {
						this.loadCompanys();
					}else{
						this.loadCompany();
					}
					return;
				}
				if (this.role == 4) { //监管部门
					if (this.searchStation) {
						this.loadCompanys();
					}else{
						this.loadAllCompany();
					}
					return;
				}
				this.loadMyStation();
			},

			confirm: function(e) {
				this.page.pageNumber = 1;
				this.loadDataByRole();
			},
			
			onSearch(e) {
				this.conditions = e.detail.value;
				this.$refs.searchs.toggle(false);
				this.$nextTick(()=>{
					this.page.pageNumber = 1;
					this.loadDataByRole();
				});
			},

			loadCompanys() {
				var data = {
					pageNumber: this.page.pageNumber,
					pageSize: 20,
					...this.conditions
				};
				this.kit.get("/api/station/companyList", data, res => {
					if (res.page.pageNumber > 1) {
						res.page.list = this.page.list.concat(res.page.list);
					}
					this.page = res.page;
					this.loading = false;
					this.refresh = false;
					uni.hideLoading()
				});
			},

			loadAllCompany: function(e) {
				var data = {
					pageNumber: this.page.pageNumber,
					pageSize: 20,
					...this.conditions
				};
				this.kit.get("/api/company/list", data, res => {
					if (res.page.pageNumber > 1) {
						res.page.list = this.page.list.concat(res.page.list);
					}
					this.page = res.page;
					this.loading = false;
					this.refresh = false;
					uni.hideLoading()
				});
			},

			

			loadCompany: function(e) {
				var data = {
					pageNumber: this.page.pageNumber,
					pageSize: 20,
					...this.conditions
				};
				this.kit.get("/api/servicerCompany/list", data, res => {
					if (res.page.pageNumber > 1) {
						res.page.list = this.page.list.concat(res.page.list);
					}
					this.page = res.page;
					this.loading = false;
					this.refresh = false;
					uni.hideLoading()
				});
			},

			switchStatus: function(e) {
				this.current = e.index;
				this.page.pageNumber = 1;
				this.loadMyStation();
			},

			loadMyStation: function(e) {
				var data = {
					pageNumber: this.page.pageNumber,
					pageSize: 20,
					"ts.status": this.status
				};
				this.kit.get("/api/station/myList", data, res => {
					if (res.page.pageNumber > 1) {
						res.page.list = this.page.list.concat(res.page.list);
					} else {
						this.statusList = res.stationStatusList;
					}
					this.page = res.page;
					this.loading = false;
					this.refresh = false;
					uni.hideLoading();
				});
			},

			removeCompany: function(e) {
				this.page.list.splice(e.index, 1);
			},

		}
	}
</script>

<style lang="scss">
	.sectionTitle {
		position: relative;
		padding-left: 22upx;

		&::before {
			content: "";
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
			width: 8upx;
			background-color: $main;
			display: block;
			position: absolute;
			top: 6upx;
			left: 0;
			bottom: 6upx;
		}
	}

	.chorusList {
		white-space: nowrap;

		.chorusItem {
			display: inline-block;
		}
	}
</style>
